<template>
    <div>
        <el-form label-width="180px">
            <el-form-item label="长度1：">
                <el-input-number v-model="side1" :min="1" :step="10" @change="refresh1"></el-input-number>
            </el-form-item>
            <el-form-item label="长度1是长度2的倍数：">
                <el-input-number v-model="multiple" :min="1" :step="1" @change="refresh1"></el-input-number>
            </el-form-item>
            <el-form-item label="长度2：">
                <el-input-number v-model="side2" :min="1" :step="10" @change="refresh2"></el-input-number>
            </el-form-item>
        </el-form>
        <v-stage :config="configKonva">
            <v-layer>
                <v-line :config="{
                    x: 20,
                    y: 20,
                    points: [0, 0, side1, 0],
                    stroke: 'black',
                  }"/>

                <template v-for="i in (multiple + 1)">
                    <v-line :key="i" :config="{
                        x: 20,
                        y: 20,
                        points: [side2 * (i - 1), -5, side2 * (i - 1), 5],
                        stroke: 'green',
                      }"/>
                </template>

                <v-line :config="{
                    x: 20,
                    y: 40,
                    points: [0, 0, side2, 0],
                    stroke: 'red',
                  }"/>
            </v-layer>
        </v-stage>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                side1: 100,
                side2: 1,
                multiple: 4,
                configKonva: {
                    width: 1000,
                    height: 200
                },
                configCircle: {
                    x: 100,
                    y: 100,
                    radius: 70,
                    fill: "red",
                    stroke: "black",
                    strokeWidth: 4
                }
            };
        },
        methods: {
            refresh1() {
                this.side2 = this.side1 / this.multiple
                this.side2 = Math.round(this.side2 * 100) / 100
                this.updateStage()
            },
            refresh2() {
                this.side1 = this.side2 * this.multiple
                this.side1 = Math.round(this.side1 * 100) / 100
                this.updateStage()
            },
            updateStage() {
                this.configKonva.width = Math.max(1000, this.side1 + 100)
            }
        },
        mounted() {
            this.side2 = this.side1 / this.multiple
        }
    };

</script>
